<template>
   <el-dialog
      v-model="dialogVisible"
      title="操作确认"
      width="30%">
      <!-- 显示【当前模式的提示信息】 -->
      <span>{{ dialogMode.msg }}</span>

      <template #footer>
         <span class="dialog-footer">
            <el-button @click="dialogVisible = false">取消</el-button>

            <!-- 用户点击确认时执行【当前模式对应的回调】 -->
            <el-button
               type="primary"
               @click="dialogMode.callback">
               确认
            </el-button>
         </span>
      </template>
   </el-dialog>
</template>

<script setup lang="ts">
import { ref } from "vue";
import DialogMode from "./DialogMode";

const { dialogMode } = defineProps({
   dialogMode: {
      // 此处的value必须为一个构造函数
      type: DialogMode,
      required: true,
   },
});

// 对话框显隐控制
const dialogVisible = ref(false);

const setDialogVisible = value => (dialogVisible.value = value);

defineExpose({
   setDialogVisible,
});
</script>

<style lang="scss" scoped></style>
